<template>
  <view class="wrap">
    <u-form class="form" :model="model" :rules="rules" ref="uForm">
      <u-form-item label="用户名" prop="username" label-width="120">
        <u-input placeholder="请输入用户名" v-model="model.username" type="text"></u-input>
      </u-form-item>
      <u-form-item label="手机" prop="phone" label-width="120">
        <u-input placeholder="请输入手机号码" v-model="model.phone" type="text" maxlength="11"></u-input>
      </u-form-item>
      <u-form-item label="昵称" prop="nickname" label-width="120">
        <u-input placeholder="请输入昵称" v-model="model.nickname" type="text"></u-input>
      </u-form-item>
      <u-form-item label="姓名" prop="name" label-width="120">
        <u-input placeholder="请输入姓名" v-model="model.name" type="text"></u-input>
      </u-form-item>
      <u-form-item label="邮箱" prop="email" label-width="120">
        <u-input placeholder="请输入电子邮箱" v-model="model.email" type="text"></u-input>
      </u-form-item>
      <u-form-item label="密码" prop="password" label-width="120">
        <u-input placeholder="请输入密码" v-model="model.password" type="text"></u-input>
      </u-form-item>
    </u-form>
    <view class="form-footer">
      <u-button class="btn" type="primary" @click="submit">提交</u-button>
      <u-button class="btn" type="default" @click="cancel">关闭</u-button>
    </view>
  </view>
</template>
<script>
import config from "../../../common/config";

export default {
  data() {
    return {
      image: '',
      model: {
        avatar: undefined,
        username: undefined,
        phone: undefined,
        nickname: undefined,
        name: undefined,
        email: undefined
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur',
          },
          {
            min: 2,
            max: 32,
            message: '姓名长度在 2 到 32 个字符',
            trigger: ['change', 'blur'],
          }
        ],
        phone: [
          {
            validator: (rule, value, callback) => {
              return value == '' || this.$u.test.mobile(value);
            },
            message: '手机号码不正确',
            trigger: ['change', 'blur'],
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
        ]
      },
      avatarBase64: ''
    };
  },
  onLoad() {
    this.model = this.vuexUser
    this.model.password = undefined
    this.image = config.baseUrl + this.model.avatar
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    submit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          this.model.userId = this.vuexUser.userId
          this.model.username = this.vuexUser.username

          //更新用户信息
          this.$u.api.user.updateUserInfo(this.model).then(res => {
            let temp = this
            uni.showModal({
              title: '提示',
              content: '更新用户信息成功,请重新登录.',
              showCancel: false,
              success: function () {
                temp.$u.api.logout().then(res => {
                  //清空存储信息
                  temp.$u.vuex('vuexToken', '')
                  temp.$u.vuex('vuexUser', {})

                  setTimeout(() => {
                    uni.reLaunch({
                      url: '/pages/sys/login/index'
                    });
                  }, 500);

                });
              }
            });
          })
        } else {
          this.$u.toast('您填写的信息有误，请根据提示修正。');
        }
      });
    },
    cancel() {
      uni.navigateBack();
    }
  }
};
</script>
<style lang="scss"></style>
